<!-- 装备技能 -->
<template>
    <el-card v-for="column in columns">
      <!-- 标题栏 -->
      <template #header>
        <div class="card-header">
          <span>{{ column.name }}</span>
        </div>
      </template>
      <!-- 表单栏 -->
      <el-form :model="equipment">
        <el-form-item v-for="prop in column.properties" :key="prop.field" :label="prop.label">
         <!-- 装备类型下拉框 -->
          <el-select
            v-if="prop.field === 'skills'"
            v-model="equipment[prop.field]"
            :disabled="props.openType === 'preview'"
            multiple
            filterable
            placeholder="请选择技能"
            style="width: 100%"
          >
            <el-option
              v-for="item in skillOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElTree } from 'element-plus';
import {ajax } from '@/api';
import { ElMessage } from 'element-plus';
import { number } from 'echarts';
import type { EquipTpl } from '@/pojo/equip-tpl';
const props = defineProps<{
  equipment?: EquipTpl; // 必须符合 Equipment 类型、
  openType: string; // 打开方式 add/edit/preview
}>();
// 技能选项（示例数据，需要根据实际需求替换）
const skillOptions = ref([
  { value: 1, label: '火球术' },
  { value: 2, label: '冰霜箭' },
  { value: 3, label: '治疗术' },
  { value: 4, label: '闪电链' },
  { value: 5, label: '烈焰风暴' },
  // 添加更多技能选项
]);
let columns = ref([
    {
      name: '武器技能',
      properties: [
        { field: 'skills', label: '装备技能', type: 'number[]' }
      ]
    }
])


// 监听传入参数的变化
watch(
  () => props.equipment,
  (newVal, oldVal) => {
    console.log('权限参数发生变化:', newVal, oldVal);
    if (newVal) {
    
    }
  }
);
</script>

<style scoped></style>
